{% load static %}
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/png" href="{% static '../static/favicon.png' %}">

	<link rel="stylesheet"  href="{% static '../static/css/bootstrap.min.css' %}">
	<link rel="stylesheet" href="{% static '../static/style.css' %}">
	<link rel="stylesheet" href="{% static '../static/css/animate.min.css' %}">
	<link rel="stylesheet" href="{% static '../static/css/font-awesome.min.css' %}">
	<link href='https://fonts.googleapis.com/css?family="Josefin+Sans"&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css'>

	<script src="{% static '../static/js/jquery-2.1.0.min.js' %}"></script>
	<script src="{% static '../static/js/bootstrap.min.js' %}"></script>
	<script src="{% static '../static/js/blocs.min.js' %}"></script>
	<script src="{% static '../static/js/jquery.touchSwipe.min.js' %}" defer></script>
	<script src="{% static '../static/js/lazysizes.min.js' %}" defer></script>
    <title>首页</title>


<!-- Google Analytics -->

<!-- Google Analytics END -->

</head>
<body>
<!-- Main container -->
<div class="page-container">

<!-- bloc-0 -->
<div class="bloc bgc-black d-bloc " id="bloc-0">
	<div class="container fill-bloc-top-edge">
		<nav class="navbar row">
			<div class="navbar-header">
				<a class="navbar-brand" href="{% url 'index' %}"><img src="{% static '../static/img/logo.png' %}" alt="logo" class="lazyload" />ThoughtWorks</a>
				<button id="nav-toggle" type="button" class="ui-navbar-toggle navbar-toggle menu-icon-rounded-bars" data-toggle="collapse" data-target=".navbar-1">
					<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
				</button>
			</div>
			<div class="collapse navbar-collapse navbar-1 special-dropdown-nav">
			    <form action="{% url 'movie_search_form' %}" method="post" class="navbar-form pull-right" role="search">
                    {% csrf_token %}
                    <input type="text" name="q" class="form-control" placeholder="Search">
                    <button type="submit" name="submit" class="btn btn-default">搜索</button>
                </form>
            </div>
		</nav>
	</div>
</div>
<!-- bloc-0 END -->

<!-- bloc-1 -->
<div class="bloc bgc-splashed-white l-bloc" id="bloc-1">
	<div class="container bloc-lg">
		<div class="row voffset">
            <!--left-->
			<div class="col-sm-3">
				<div class="sidebar">
                    <div class="sidebar_cell">
                        <div class="sidebar_cell_title"><span class="">类型</span></div>
                        <div class="sidebar_cell_list">
                            <a href="{% url 'movie_genre' '剧情' %}">剧情</a>
                            <a href="{% url 'movie_genre' '动作' %}">动作</a>
                            <a href="{% url 'movie_genre' '爱情' %}">爱情</a>
                            <a href="{% url 'movie_genre' '悬疑' %}">悬疑</a>
                            <a href="{% url 'movie_genre' '恐怖' %}">恐怖</a>
                            <a href="{% url 'movie_genre' '灾难' %}">灾难</a>
                            <a href="{% url 'movie_genre' '冒险' %}">冒险</a>
                            <a href="{% url 'movie_genre' '犯罪' %}">犯罪</a>
                            <a href="{% url 'movie_genre' '惊悚' %}">惊悚</a>
                            <a href="{% url 'movie_genre' '战争' %}">战争</a>
                            <a href="{% url 'movie_genre' '喜剧' %}">喜剧</a>
                            <a href="{% url 'movie_genre' '科幻' %}">科幻</a>
                            <a href="{% url 'movie_genre' '奇幻' %}">奇幻</a>
                            <a href="{% url 'movie_genre' '动画' %}">动画</a>
                            <a href="{% url 'movie_genre' '历史' %}">历史</a>
                            <a href="{% url 'movie_genre' '传记' %}">传记</a>
                            <a href="{% url 'movie_genre' '悬疑' %}">悬疑</a>
                            <a href="{% url 'movie_genre' '家庭' %}">家庭</a>
                            <a href="{% url 'movie_genre' '儿童' %}">儿童</a>
                            <a href="{% url 'movie_genre' '音乐' %}">音乐</a>
                            <a href="{% url 'movie_genre' '同性' %}">同性</a>
                            <a href="{% url 'movie_genre' '歌舞' %}">歌舞</a>
                            <a href="{% url 'movie_genre' '西部' %}">西部</a>
                            <a href="{% url 'movie_genre' '武侠' %}">武侠</a>
                            <a href="{% url 'movie_genre' '古装' %}">古装</a>
                        </div>
                    </div>
                    <div class="sidebar_cell">
                        <div class="sidebar_cell_title"><span>时间</span></div>
                        <div class="sidebar_cell_list">
                            <a href="{% url 'movie_year' 2017 %}">2017</a>
                            <a href="{% url 'movie_year' 2016 %}">2016</a>
                            <a href="{% url 'movie_year' 2015 %}">2015</a>
                            <a href="{% url 'movie_year' 2014 %}">2014</a>
                            <a href="{% url 'movie_year' 2013 %}">2013</a>
                            <a href="{% url 'movie_year' 2012 %}">2012</a>
                            <a href="{% url 'movie_year' 2011 %}">2011</a>
                            <a href="{% url 'movie_year' 2010 %}">2010</a>
                            <a href="{% url 'movie_year' 2009 %}">2009</a>
                            <a href="{% url 'movie_year' 2008 %}">2008</a>
                            <a href="{% url 'movie_year' 2007 %}">2007</a>
                            <a href="{% url 'movie_year' 2006 %}">2006</a>
                            <a href="{% url 'movie_year' 2005 %}">2005</a>
                            <a href="{% url 'movie_year' 2004 %}">2004</a>
                            <a href="{% url 'movie_year' 2003 %}">2003</a>
                            <a href="{% url 'movie_year' 2002 %}">2002</a>
                            <a href="{% url 'movie_year' 2001 %}">2001</a>
                            <a href="{% url 'movie_year' 2000 %}">2000</a>
                            <a href="{% url 'movie_year' 19 %}">19 ...</a>
                        </div>
                    </div>
                </div>
			</div>
            <!--end left-->

            <!--right-->
            <!--{{movies|length}}-->
			<div class="col-sm-9">
                <div class="row">
                    {% if movies %}
                    {% for movie in movies %}
                    <div class="col-sm-2 col-xs-4 text-center">
                        <a href="{% url 'movie_detail' movie.id %}" data-gallery-id="gallery-1">
                            <img src="{% if 34  %}{{movie.image}}{% endif %}" alt="照片无法显示" class="img-responsive lazyload movie-img" />
                            <p class="text-center">
                                <span class="" style="color:#444">
                                    {%if movie.title|length >= 8 %}
                                    {{movie.title|slice:'6'}} ...
                                    {%else%}
                                    {{movie.title}}
                                    {%endif%}
                                </span>
                            </p>
                        </a>
                        <p class="text-center movie-rating">
                            <span class="label label-primary">评分: {{movie.rating}}</span>
                        </p>
    			    </div>
                    {% endfor %}
                    {% else %}
                    <div class="video-container">
                            <video class="bloc-video" preload="auto" loop="loop" autoplay="autoplay" width="100%">gfhf
                                <source src="{% static '../static/vid/404.mp4' %}" type="video/mp4" />
                            </video>
                            <h3 class="text-center" style="color:#333">没有资源</h3>
                    </div>
                    {% endif %}
                </div>

                <!--pagination-->
                <!--{{movies|length}}-->
                <div class="row">
                    <div class="col-sm-12 text-center page-num-location">
                        <div class="pagination">
                            <span class="step-links">
                            {% if movies.has_previous %}
                            <a href="?page=1" ><span class="label label-primary">&laquo; 首页</span></a>
                            <a href="?page={{ movies.previous_page_number }}" ><span class="label label-success">前一页</span></a>
                            {% endif %}

                            <span class="current" style="color:#080808;font-size:12px;">
                            第 {{ movies.number }} 页，共 {{ movies.paginator.num_pages }} 页
                            </span>

                            {% if movies.has_next %}
                                <a href="?page={{ movies.next_page_number }}"><span class="label label-success">下一页</span></a>
                                <a href="?page={{ movies.paginator.num_pages }}"><span class="label label-primary">页尾 &raquo;</span></a>
                            {% endif %}
                            </span>
                        </div>
                    </div>
                </div>
                <!--end pagination-->



			</div>
            <!--end right-->
		</div>
	</div>
</div>
<!-- bloc-1 END -->

<!-- ScrollToTop Button -->
<a class="bloc-button btn btn-d scrollToTop" onclick="scrollToTarget('1')"><span class="fa fa-chevron-up"></span></a>
<!-- ScrollToTop Button END-->


<!-- Footer - bloc-2 -->
<div class="" id="bloc-2" style="background-color: #000;margin-top: 50px;">
	<div class="container">
		<div class="row">
			<div class="col-sm-12 text-center footer">
				<p>
					<span>CopyRight © Tws-Beijing 2018, All Rights Reserved.</span>
                    <span>
                        <a target="_blank" href="http://tws-beijing.ga/">
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="label label-primary">关于我们</span>
                        </a>
                    </span>
				</p>
			</div>
		</div>
	</div>
</div>
<!-- Footer - bloc-2 END -->

</div>
<!-- Main container END -->


</body>
</html>
